<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="../jquery-validation-1.9.0/jquery.validate.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<style>
    .error{
        color: red;
    }
</style>
<body>
    <div class="container" style="margin-top: 20px">
        <form action="query.html" class="text-center" id="form">
            <div class="form-group row">
            <label for="company" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">公司名称</label>
            <select class="form-control col-md-8 col-sm-8 col-xs-8" name="company" id="company" style="width: 30%;display: inline-block" onchange="changeCompany()">
            </select>
        </div>
            <div class="form-group row">
                <label for="department" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">部门名称</label>
                <select class="form-control col-md-8 col-sm-8 col-xs-8" name="department" id="department" style="width: 30%;display: inline-block">
                    <!--                    <option value=""></option>-->
                </select>
            </div>
            <div class="form-group row">
                <label for="account" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">账号</label>
                <input type="text" id="account" name="account" class="form-control col-md-8 col-sm-8 col-xs-8" style="width: 30%;display: inline-block">
            </div>
            <div class="form-group row">
                <label for="pwd" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">密码</label>
                <input type="password" id="pwd" name="pwd" class="form-control col-md-8 col-sm-8 col-xs-8" style="width: 30%;display: inline-block">
            </div>
            <div class="form-group row">
                <label for="pwd1" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">确认密码</label>
                <input type="password" id="pwd1" name="pwd1" class="form-control col-md-8 col-sm-8 col-xs-8" style="width: 30%;display: inline-block">
            </div>
            <div class="form-group row">
                <label for="age" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">年龄</label>
                <input type="text" id="age" name="age" class="form-control col-md-8 col-sm-8 col-xs-8" style="width: 30%;display: inline-block"><br>
            </div>
            <div class="form-group row">
                <label for="sex" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">性别</label>
                <div class="col-md-8 col-sm-8 col-xs-8" style="width: 30%;display: inline-block">
                <input type="radio" name="sex" value="1">&nbsp;男
                &nbsp;<input type="radio" name="sex" value="0">&nbsp;女
                    <label  for="sex" class="error" style="display: none;">必选字段</label>
                </div>
            </div>
            <div class="form-group row">
                <label for="hobby" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">爱好</label>
                <div class="col-md-8 col-sm-8 col-xs-8" style="width: 30%;display: inline-block">
                    <input type="checkbox" name="hobby" value="1">&nbsp;篮球
                    &nbsp;<input type="checkbox" name="hobby" value="2">&nbsp;NBA
                    &nbsp;<input type="checkbox" name="hobby" value="3">&nbsp;游戏
                    <label  for="hobby" class="error" style="display: none;">必选字段</label>
                </div>
            </div>
            <div class="form-group row">
                <label for="edu" class="control-label col-md-2 col-sm-2 col-xs-2 col-md-offset-2">学历</label>
                <select class="form-control col-md-8 col-sm-8 col-xs-8" name="edu" id="edu" style="width: 30%;display: inline-block">
                    <option value="">--请选择学历--</option>
                    <option value="1">大专</option>
                    <option value="2">本科</option>
                    <option value="3">博士及以上</option>
                </select>
            </div>
            <div class="form-group col-md-offset-2" style="width: 60%;">
                <button type="submit" class="btn btn-primary">提交</button>
                <button class="btn btn-default " type="reset">重置</button>
                <a href="query.html" class="btn btn-warning" >返回</a>
<!--                <button ></button>-->
            </div>
        </form>
    </div>
</body>
</html>
<script type="text/javascript">
    //公司
        $(function () {
            $.ajax({
                url:"../json/company.json",
                type:"get",
                dataType:"json",
                data:"",
                success:function (data) {
                    // alert(data)
                    var html = '<option value="">--请选择公司--</option>';
                    $.each(data,function (a,b) {
                        if(b.tybe == '1'){
                            html += '<option value="'+b.id+'">'+b.name+'</option>'
                        }
                    })
                    $("#company").append(html)
                },
                error:function () {
                    alert("请求失败！")
                }
            });
        });
        //部门
        function changeCompany() {
            $("#department").empty();
            var id = $("#company option:selected").val();
            if(id != ""){
                $.ajax({
                    url:"../json/company.json",
                    type:"get",
                    dataType:"json",
                    data:"",
                    success:function (data) {
                        // alert(data)
                        var html = '<option value="">--请选择部门--</option>';
                        $.each(data,function (a,b) {
                            if(id == b.p_id){
                                html += '<option value="'+b.id+'">'+b.name+'</option>'
                            }
                        });
                        $("#department").append(html)
                    },
                    error:function () {
                        alert("请求失败！")
                    }
                });
            }
        }

        //账号
        $.validator.addMethod("Account",function (value,element,params) {
                var reg = /^[0-9a-zA-Z]{6,10}$/;
                return reg.test($("#account").val())
        });
        //密码
        $.validator.addMethod("Pwd",function (value,element,params) {
            var reg = /^[0-9]{6}$/;
            return reg.test($("#pwd").val())
        });
        $("#form").validate({
            rules:{
                company:{
                    required:true
                },
                department:{
                    required:true
                },
                account:{
                    required:true,
                    Account:true
                },
                pwd:{
                    required:true,
                    Pwd:true
                },
                pwd1:{
                    required:true,
                    equalTo:"#pwd"
                },
                age:{
                    required:true,
                    range:[0,150]
                },
                sex:{
                    required:true
                },
                hobby:{
                    required:true
                },
                edu:{
                    required:true
                }
            },
            messages:{

                company:{
                    required:"请选择公司"
                },
                department:{
                    required:"请选择部门"
                },
                account:{
                    required:"6-10位数的数字或字母",
                    Account:"账号格式不对！"
                },
                pwd:{
                    required:"密码只是6位数字",
                    Pwd:"密码只能是6位数字"
                },
                pwd1:{
                    equalTo:"密码不一样"
                },
                age:{
                    required:"请填写年龄",
                    range:"这是要成仙了啊"
                },
                sex:{
                    required:"性别选一选"
                },
                hobby:{
                    required:"选择爱好"
                },
                edu:{
                    required:"请选择学历"
                }

            }

        });


</script>